<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script>
        function printVueDom(){
            console.log( document.getElementById("app") );
            console.log( vm.$el ); // 容器获取的效率上更高
            console.log( vm.$el === document.getElementById("app") );
        }
        function printVueData(){
            console.log(vm.$data);
        }
        function printVueOptions(){
            console.log(vm.$options);
        }
    </script>
</head>
<body>
    <input type="button" value="输出vue实例的容器DOM对象" onclick="printVueDom()">
    <input type="button" value="ue的实例数据仓库data" onclick="printVueData()">
    <input type="button" value="vue实例构建的完整配置项" onclick="printVueOptions()">
    <hr>
    下面是vue的实例容器
    <hr>
    <div id="app">
        <h4>vue的实例容器</h4>
        <input type="button" value="vue内获取容器DOM" @click="showVueDom()">
        <h4>vue的实例数据仓库data</h4>
        <input type="button" value="vue数据仓库对象" @click="showVueData()">
        <h4>vue的实例的创建配置项 options</h4>
        <input type="button" value="vue实例构建的完整配置项" @click="showVueOptions()">
        <h4>vue的实例的记录数据$refs</h4>
        <p style="color:red" id="pdom" ref="pdom">容器中的元素p</p>
        <input type="button" value="点击后在方法中获取p标签的DOM元素" @click="showPDOM()">

    </div>
</body>
<script>
    /*
    - Vue中对部分特殊的属性和功能方法进行特殊指代定义，用于提供独立的执行和获取方式
    - Vue的实例属性和方法以统一规范以 $ 开头
    - 相关实例属性和方法 
        - vm.$el：描述当前Vue实例使用的根 DOM 元素。
        - vm.$data：描述当前Vue实例观察的数据对象。
        - vm.$options：构建当前 Vue 实例的初始化选项。 -> 将内置配置和开发者配置进行整合转换后的配置项
        - vm.$refs：返回一个对象，记录当前Vue实例模板中，定义了ref属性的所有 DOM 元素。

        
        - vm.$watch：构建一个对Vue实例中数据仓库中变量（data，computed）的监控方法
        - vm.$set：等同于 Vue.set ，手动为实例中没有数据监听的变量添加监视功能
        - vm.$delete：等同于 Vue.delete ，手动为实例中的变量删除监视功能
        - vm.$mount：手动挂在Vue实例
        - vm.$destroy：手动销毁Vue实例
        - vm.$nextTick：等同于 Vue.nextTick ，将执行函数体延迟到页面DOM更新完成后执行
        - vm.$forceUpdate()：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
    */
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"msg变量",
            info:"aaa",
            arr:[1,2,3,4]
        },
        methods: {
            showVueDom(){
                console.log(this.$el);
            },
            showVueData(){
                console.log(this.$data);
            },
            showVueOptions(){
                console.log(this.$options);
            },
            showPDOM(){
                console.log( document.getElementById("pdom") );
                console.log( this.$refs );
                console.log( this.$refs.pdom );

            }
        },
    });
</script>
</html>